<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page import="org.apache.shiro.web.filter.authc.FormAuthenticationFilter"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
	<title>${fns:getConfig('productName')} 登录</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="${ctx}/static/assets/layui/css/layui.css" type="text/css" rel="stylesheet"/>
	<link href="${ctx}/static/assets/layui/css/layui-custom.css" type="text/css" rel="stylesheet"/>
	<link href="${ctx}/static/assets/bootstrap/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
	<link href="${ctx}/static/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="${ctx}/static/assets/bootstrap/css/bootstrap_custom.min.css" rel="stylesheet" type="text/css">
	<link href="${ctx}/static/assets/bootstrap/css/layout.min.css" rel="stylesheet" type="text/css">
	<link href="${ctx}/static/assets/bootstrap/css/components.min.css" rel="stylesheet" type="text/css">
	<link href="${ctx}/static/assets/bootstrap/css/colors.min.css" rel="stylesheet" type="text/css">
	<link href="${ctx}/static/assets/bootstrap/css/extras/pattern.min.css" rel="stylesheet" type="text/css">
	<link href="${ctx}/static/assets/bootstrap/css/extras/shorthand.min.css" rel="stylesheet" type="text/css">
	<link href="${ctx}/static/assets/bootstrap/js/plugins/iziToast/dist/css/iziToast.min.css" rel="stylesheet" type="text/css">

	<script src="${ctx}/static/assets/bootstrap/js/main/jquery.min.js"></script>
	<script src="${ctx}/static/assets/bootstrap/js/main/bootstrap.bundle.min.js"></script>
	<script src="${ctx}/static/assets/bootstrap/js/plugins/forms/validation/V1.19.5/dist/jquery.validate.min.js"></script>
	<script src="${ctx}/static/assets/bootstrap/js/plugins/forms/validation/V1.19.5/dist/localization/messages_zh.js"></script>
	<script src="${ctx}/static/assets/bootstrap/js/plugins/iziToast/dist/js/iziToast.min.js"></script>
	<script src="${ctx}/static/assets/layui/layui.js"></script>

	<script>
		$(".preloader").fadeOut();
		layer.config({
			skin: 'layui-layer-custom'
			,area: '360px'
		})
		// 如果在框架或在对话框中，则弹出提示并跳转到首页
		if(self.frameElement && self.frameElement.tagName === "IFRAME"
				|| $('#left').length > 0 || $('.jbox').length > 0){
			top.layer.alert('登录已超时，请重新登录，谢谢！'
					,{closeBtn:0,resize:false,move:false}
					,function(index){
						top.location = "${ctxAdmin}";
						layer.close(index);
					});
		}
		$(document).ready(function() {
			$(".login-form").validate({
				rules: {
					validateCode: {remote: "${pageContext.request.contextPath}/servlet/validateCodeServlet"}
				},
				messages: {
					username: {required: "请录入登录账号."},password: {required: "请录入登录密码."},
					validateCode: {remote: "验证码不正确.", required: "请录入验证码."}
				},
				errorPlacement: function (error, element) {
					console.log(error);
					top.iziToast.info({
						title: '提示',
						message: error.text(),
						position: 'topCenter'
					});
				}
			});
		});
	</script>
	<style>
		.validateCode{
			width: 80px;
			border: 1px solid #ddd;
			border-left: none;
			border-right: none;
		}
		body{background: url(${ctx}/static/assets/bootstrap/img/bg-1.svg) no-repeat !important;}
		.form-control:focus {border-color: #3f51b5!important;}
        /*.auth-box{
            top: 0;
            left: 0;
            height: 100%;
            margin: 0;
            position: absolute;
            padding: 40px;
            padding-top: 250px;
            max-width: 400px;
            width: 90%;
        }*/
		.auth-box{
			top: 0;
			left: 0;
			height: 100%;
			margin: 150px auto;
			position: relative;
			padding: 40px;
			padding-top: 250px;
			max-width: 400px;
			width: 90%;
		}
        .login-picture{
            bottom: 0;
            right: 0;
            position: absolute;
            max-width: 600px;
            width: 90%;}
        .login-desc{
            top: 100px;
            left: 400px;
            position: absolute;
            padding: 100px;
            padding-top: 200px;
        }
	</style>
</head>
<body>
<div class="text-white" style="font-size: 40px;position: absolute;top:30px;left: 40px;letter-spacing: 6px;">
	<i class="icon-shield2 icon-2x mr-2"></i>${fns:getConfig('productName')}</div>
<div class="content">
	<sys:message content="${message}"/>

		<div class="auth-box" style="box-shadow: 0px 0px 20px 0px rgb(63 81 181 / 30%);">
			<form class="login-form" action="${ctxAdmin}/login" method="post" autocomplete="off">
				<h3 class="mb-10 text-primary" style="letter-spacing: 5px"><i class="icon-reading icon-2x mr-2"></i>系统登录</h3>
				<label class="col-form-label text-primary">登录账号:</label>
				<div class="form-group form-group-feedback form-group-feedback-left">

					<input type="text" class="form-control required border-left-3 border-left-primary"
						   name="username" placeholder="登录账号" value="${username}">
					<div class="form-control-feedback">
						<i class="icon-user text-primary"></i>
					</div>
				</div>
				<label class="col-form-label text-primary">登录密码:</label>
				<div class="form-group form-group-feedback form-group-feedback-left">
					<input type="password" class="form-control required border-left-3 border-left-primary"
						   name="password" placeholder="登录密码">
					<div class="form-control-feedback">
						<i class="icon-lock2 text-primary"></i>
					</div>
				</div>
				<c:if test="${isValidateCodeLogin}">
					<div class="form-group form-group-feedback form-group-feedback-left">
						<div class="position-relative">
							<div class="input-group">
								<input type="text" id="validateCode" name="validateCode" maxlength="4" placeholder="验证码" class="form-control required"/>
								<img class="validateCode" alt="验证码" src="${pageContext.request.contextPath}/servlet/validateCodeServlet"/>
								<span class="input-group-append">
									<a href="#" class="input-group-text" id="refreshCode"
									   onclick="$('.validateCode').attr('src','${ctx}/servlet/validateCodeServlet?'+new Date().getTime());">刷新</a>
								</span>
							</div>
							<div class="form-control-feedback">
								<i class="icon-shield2 text-muted"></i>
							</div>
						</div>
					</div>
				</c:if>
				<div class="form-group">
					<button type="submit" class="btn btn-primary btn-block rounded-round text-size-lg">登 录</button>
				</div>
			</form>
		</div>
        <%--<div class="login-desc ">
            <h1><i class="icon-droplet mr-3 icon-2x text-primary"></i>计量标准考核任务</h1>
            <h3 class="ml-10">任务下达，考评员填报，现场考核通知下载</h3>
            <h1><i class="icon-droplet mr-3 icon-2x text-primary"></i>自编校准规范备案</h1>
            <h3 class="ml-10">备案申报，资料下载，信息查询</h3>
            <h1><i class="icon-droplet mr-3 icon-2x text-primary"></i>专业项目考试</h1>
            <h3 class="ml-10">考试申报，资料下载，信息查询</h3>
        </div>--%>
        <div class="login-picture">
            <img src="${ctx}/static/assets/bootstrap/img/login.png" style="width: 600px">
        </div>

</div>
</body>
</html>